<h3>Tree10</h3>
<!-- 
  nzDblClick	       双击树节点触发
  nzTreeTemplate     自定义节点
  let-node           是啥
  class.active       看不懂
  activedNode?.key   看不懂
  contextmenu        右键树节点吗?
  看的有点晕，先这样吧
 -->
<nz-tree [nzData]="nodes" (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)"
  [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
<ng-template #nzTreeTemplate let-node>
  <span class="custom-node" [class.active]="activedNode?.key === node.key">
    <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
      <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
      <span class="folder-name">{{ node.title }}</span>
      <span class="folder-desc">created by {{ node?.origin?.author | lowercase }}</span>
    </span>
    <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event, menu)">
      <i nz-icon nzType="file"></i>
      <span class="file-name">{{ node.title }}</span>
      <span class="file-desc">modified by {{ node?.origin?.author | lowercase }}</span>
    </span>
  </span>
</ng-template>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item (click)="selectDropdown()">Action 1</li>
    <li nz-menu-item (click)="selectDropdown()">Action 2</li>
  </ul>
</nz-dropdown-menu>